<template>
    <div class="seeding">
        <div class="video">
            <div class="atitle">
                <div class="t-title">欢迎来到瓜夕夕直播间</div>
                <div class="t-introduce">精品早佳8424西瓜热卖中，速来围观！机会不容错过，买到就是赚到！</div>
            </div>
            <section class="experiment playing" style="width:100%; height:76.5%;">
                <div id="videos-container" style="width:100%; height:80%;">
                </div>
            </section>
            <div class="control-btn">
                <el-button @click="btn_vp">音量+</el-button>
                <el-button @click="btn_vm">音量-</el-button>
                <span style="margin:0 0 0 10px" @click="open">
                    <el-button icon="el-icon-video-play" v-if="data2">开启直播</el-button>
                    <el-button icon="el-icon-switch-button" v-else>关闭直播</el-button>
                </span>
                <span @click="microphone" style="margin:0 10px">
                    <el-button icon="el-icon-microphone" v-if="data1"></el-button>
                    <el-button icon="el-icon-turn-off-microphone" v-else></el-button>
                </span>
                <el-button icon="el-icon-video-camera" id="openCamera" @click="openBtn">摄像头</el-button>
            </div>
        </div>
        <div class="gift">
            <div class="list">
                <div class="list-img">
                    <img src="../../public/img/83.jpg" alt="" style="border-radius: 50%;margin:0 0 0 28%">
                </div>
                <img src="../../public/img/14.jpg" alt="" style="border-radius: 50%;margin:0 0 0 13%">
                <img src="../../public/img/96.jpg" alt="" style="border-radius: 50%;">
                <p>积极三人组</p>
            </div>
            <div class="list-bullet">
                <div class="bullet1">
                    <div class="bullet1-d"></div>
                </div>
                <div class="bullet2">
                    <input type="text" placeholder="请输入弹幕"><button>发送</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data1: true,
      data2: true,
      MediaUtils:{}
    };
  },
  methods: {
    microphone() {
      let player = document.getElementById("player");
      if (this.data1) {
        this.data1 = false;
        player.volume = 0;
        console.log(player.volume);
      } else {
        this.data1 = true;
      }
    },
    btn_vp() {
      let player = document.getElementById("player");
      player.volume = Math.min(1, player.volume + 0.1);
      console.log(player.volume);
    },
    btn_vm() {
      let player = document.getElementById("player");
      player.volume = Math.max(0, player.volume - 0.1);
      console.log(player.volume);
    },
    open() {
      let player = document.getElementById("player");
      if (this.data2) {
        this.data2 = false;
        player.play();
      } else {
        this.data2 = true;
        player.pause();
      }
    },
    // 调用摄像头
    openBtn() {
      var mediaRecorder;
      var videosContainer = document.getElementById('videos-container');
      var len = videosContainer.childNodes.length;
      for (var i = 0; i < len; i++) {
        videosContainer.removeChild(videosContainer.childNodes[i]);
      }

      var video = document.createElement("video");

      var videoWidth = 860;
      var videoHeight = 460;

      video.controls = false;
      video.muted = true;
      video.width = videoWidth;
      video.height = videoHeight;
      this.MediaUtils.getUserMedia(true, false, function(err, stream) {
        if (err) {
          throw err;
        } else {
          // 通过 MediaRecorder 记录获取到的媒体流
          console.log();
          mediaRecorder = new MediaRecorder(stream);
        //   mediaStream = stream;
          var chunks = [],
            startTime = 0;
          video.srcObject = stream;
          video.play();

          videosContainer.appendChild(video);
          mediaRecorder.ondataavailable = function(e) {
            mediaRecorder.blobs.push(e.data);
            chunks.push(e.data);
          };
          mediaRecorder.blobs = [];

          mediaRecorder.onstop = function(e) {
            recorderFile = new Blob(chunks, { type: mediaRecorder.mimeType });
            chunks = [];
            if (null != stopRecordCallback) {
              stopRecordCallback();
            }
          };
        }
      });
    }
  },

  mounted() {
    this.MediaUtils = {
      /**
       * 获取用户媒体设备(处理兼容的问题)
       * @param videoEnable {boolean} - 是否启用摄像头
       * @param audioEnable {boolean} - 是否启用麦克风
       * @param callback {Function} - 处理回调
       */
      getUserMedia: function(videoEnable, audioEnable, callback) {
        navigator.getUserMedia =
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia ||
          window.getUserMedia;
        var constraints = { video: videoEnable, audio: audioEnable };
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function(stream) {
              callback(false, stream);
            })
            ["catch"](function(err) {
              callback(err);
            });
        } else if (navigator.getUserMedia) {
          navigator.getUserMedia(
            constraints,
            function(stream) {
              callback(false, stream);
            },
            function(err) {
              callback(err);
            }
          );
        } else {
          callback(new Error("Not support userMedia"));
        }
      },

      /**
       * 关闭媒体流
       * @param stream {MediaStream} - 需要关闭的流
       */
      closeStream: function(stream) {
        if (typeof stream.stop === "function") {
          stream.stop();
        } else {
          let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

          for (let i = 0; i < trackList.length; i++) {
            let tracks = trackList[i];
            if (tracks && tracks.length > 0) {
              for (let j = 0; j < tracks.length; j++) {
                let track = tracks[j];
                if (typeof track.stop === "function") {
                  track.stop();
                }
              }
            }
          }
        }
      }
    };
    var saveAs =
      saveAs ||
      (function(view) {
        "use strict";
        // IE <10 is explicitly unsupported
        if (
          typeof view === "undefined" ||
          (typeof navigator !== "undefined" &&
            /MSIE [1-9]\./.test(navigator.userAgent))
        ) {
          return;
        }
        var doc = view.document,
          // only get URL when necessary in case Blob.js hasn't overridden it yet
          get_URL = function() {
            return view.URL || view.webkitURL || view;
          },
          save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a"),
          can_use_save_link = "download" in save_link,
          click = function(node) {
            var event = new MouseEvent("click");
            node.dispatchEvent(event);
          },
          is_safari = /constructor/i.test(view.HTMLElement) || view.safari,
          is_chrome_ios = /CriOS\/[\d]+/.test(navigator.userAgent),
          throw_outside = function(ex) {
            (view.setImmediate || view.setTimeout)(function() {
              throw ex;
            }, 0);
          },
          force_saveable_type = "application/octet-stream",
          // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
          arbitrary_revoke_timeout = 1000 * 40, // in ms
          revoke = function(file) {
            var revoker = function() {
              if (typeof file === "string") {
                // file is an object URL
                get_URL().revokeObjectURL(file);
              } else {
                // file is a File
                file.remove();
              }
            };
            setTimeout(revoker, arbitrary_revoke_timeout);
          },
          dispatch = function(filesaver, event_types, event) {
            event_types = [].concat(event_types);
            var i = event_types.length;
            while (i--) {
              var listener = filesaver["on" + event_types[i]];
              if (typeof listener === "function") {
                try {
                  listener.call(filesaver, event || filesaver);
                } catch (ex) {
                  throw_outside(ex);
                }
              }
            }
          },
          auto_bom = function(blob) {
            // prepend BOM for UTF-8 XML and text/* types (including HTML)
            // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
            if (
              /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(
                blob.type
              )
            ) {
              return new Blob([String.fromCharCode(0xfeff), blob], {
                type: blob.type
              });
            }
            return blob;
          },
          FileSaver = function(blob, name, no_auto_bom) {
            if (!no_auto_bom) {
              blob = auto_bom(blob);
            }
            // First try a.download, then web filesystem, then object URLs
            var filesaver = this,
              type = blob.type,
              force = type === force_saveable_type,
              object_url,
              dispatch_all = function() {
                dispatch(
                  filesaver,
                  "writestart progress write writeend".split(" ")
                );
              },
              // on any filesys errors revert to saving with object URLs
              fs_error = function() {
                if (
                  (is_chrome_ios || (force && is_safari)) &&
                  view.FileReader
                ) {
                  // Safari doesn't allow downloading of blob urls
                  var reader = new FileReader();
                  reader.onloadend = function() {
                    var url = is_chrome_ios
                      ? reader.result
                      : reader.result.replace(
                          /^data:[^;]*;/,
                          "data:attachment/file;"
                        );
                    var popup = view.open(url, "_blank");
                    if (!popup) view.location.href = url;
                    url = undefined; // release reference before dispatching
                    filesaver.readyState = filesaver.DONE;
                    dispatch_all();
                  };
                  reader.readAsDataURL(blob);
                  filesaver.readyState = filesaver.INIT;
                  return;
                }
                // don't create more object URLs than needed
                if (!object_url) {
                  object_url = get_URL().createObjectURL(blob);
                }
                if (force) {
                  view.location.href = object_url;
                } else {
                  var opened = view.open(object_url, "_blank");
                  if (!opened) {
                    // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
                    view.location.href = object_url;
                  }
                }
                filesaver.readyState = filesaver.DONE;
                dispatch_all();
                revoke(object_url);
              };
            filesaver.readyState = filesaver.INIT;

            if (can_use_save_link) {
              object_url = get_URL().createObjectURL(blob);
              setTimeout(function() {
                save_link.href = object_url;
                save_link.download = name;
                click(save_link);
                dispatch_all();
                revoke(object_url);
                filesaver.readyState = filesaver.DONE;
              });
              return;
            }

            fs_error();
          },
          FS_proto = FileSaver.prototype,
          saveAs = function(blob, name, no_auto_bom) {
            return new FileSaver(
              blob,
              name || blob.name || "download",
              no_auto_bom
            );
          };
        // IE 10+ (native saveAs)
        if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
          return function(blob, name, no_auto_bom) {
            name = name || blob.name || "download";

            if (!no_auto_bom) {
              blob = auto_bom(blob);
            }
            return navigator.msSaveOrOpenBlob(blob, name);
          };
        }

        FS_proto.abort = function() {};
        FS_proto.readyState = FS_proto.INIT = 0;
        FS_proto.WRITING = 1;
        FS_proto.DONE = 2;

        FS_proto.error = FS_proto.onwritestart = FS_proto.onprogress = FS_proto.onwrite = FS_proto.onabort = FS_proto.onerror = FS_proto.onwriteend = null;

        return saveAs;
      })(
        (typeof self !== "undefined" && self) ||
          (typeof window !== "undefined" && window) ||
          this.content
      );
  }
};
</script>
<style>
.seeding {
  width: 100%;
  height: 600px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.seeding .video {
  width: 75%;
  height: 100%;
  /* display: flex;
    flex-wrap: wrap; */
}
.seeding .gift {
  width: 24%;
  height: 100%;
}
.video .atitle {
  width: 100%;
  height: 10%;
}
.video .playing {
  width: 100%;
  height: 80%;
  background-color: black;
  border: 1px solid black;
}
.video .control-btn {
  width: 100%;
  height: 10%;
}
.t-title {
  height: 50%;
  line-height: 35px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
.t-introduce {
  height: 50%;
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 0 2%;
}
.list {
  width: 100%;
  height: 30%;
  background-color: #dee1e6;
}
.list p {
  margin-left: 25%;
}
.list-bullet {
  width: 100%;
  height: 70%;
}
.bullet1 {
  width: 100%;
  height: 90%;
  background-color: #dee1e6;
}
.bullet1 .bullet1-d {
  width: 94%;
  height: 99%;
  margin-left: 3%;
  border-radius: 2%;
  background-color: #fff;
}
.bullet2 {
  width: 100%;
  height: 10%;
  background-color: #dee1e6;
}
.bullet2 > input {
  border-radius: 10px;
  border: none;
  margin-top: 5%;
}
.bullet2 button {
  font-size: 12px;
}
</style>

